html {
    scroll-behavior: smooth;
}

figure.highlight {
    overflow-x: auto;
}

figure.highlight>table {
    width: 100%;
}

pre {
    border-radius: 2px;
    position: relative;
}

pre code {
    overflow-x: auto;
    color: #525252;
    white-space: pre;
    padding: 1.2em 1.4em;
    font-size: 0.85rem;
    line-height: 1.6rem;
    display: block;
    /* font-weight: 600; */
}

table {
    margin: 20px 0;
}

table tr td {
    border: 1px solid #999;
    padding: 10px 0;
}

pre code .hljs-tag,
pre code .hljs-tag pre code .hljs-title,
pre code .hljs-change,
pre code .hljs-winutils,
pre code .hljs-flow,
pre code .hljs-tex pre code .hljs-special {
    color: #2973b7;
}

pre code .hljs-symbol,
pre code .hljs-symbol pre code .hljs-string,
pre code .hljs-value,
pre code .hljs-regexp,
pre code .hljs-string,
pre code .hljs-subst,
pre code .hljs-haskell pre code .hljs-type,
pre code .hljs-preprocessor,
pre code .hljs-ruby pre code .hljs-class pre code .hljs-parent,
pre code .hljs-built_in,
pre code .hljs-sql pre code .hljs-aggregate,
pre code .hljs-django pre code .hljs-template_tag,
pre code .hljs-django pre code .hljs-variable,
pre code .hljs-smalltalk pre code .hljs-class,
pre code .hljs-javadoc,
pre code .hljs-django pre code .hljs-filter pre code .hljs-argument,
pre code .hljs-smalltalk pre code .hljs-localvars,
pre code .hljs-smalltalk pre code .hljs-array,
pre code .hljs-attr_selector,
pre code .hljs-pseudo,
pre code .hljs-addition,
pre code .hljs-stream,
pre code .hljs-envvar,
pre code .hljs-apache pre code .hljs-tag,
pre code .hljs-apache pre code .hljs-cbracket,
pre code .hljs-tex pre code .hljs-command,
pre code .hljs-prompt {
    color: #42b983;
}

pre code .hljs-function pre code .hljs-keyword,
pre code .hljs-constant {
    color: #0092db;
}

pre code .hljs-keyword,
pre code .hljs-attribute {
    color: #d63200;
}

pre code .hljs-number,
pre code .hljs-literal {
    color: #a32eff;
}

pre code .hljs-class pre code .hljs-title {
    color: #fff;
}

pre code .hljs-title {
    color: #a6e22e;
}

pre code .hljs-tag pre code .hljs-value,
pre code .hljs-comment,
pre code .hljs-java pre code .hljs-annotation,
pre code .hljs-python pre code .hljs-decorator,
pre code .hljs-template_comment,
pre code .hljs-pi,
pre code .hljs-doctype,
pre code .hljs-deletion,
pre code .hljs-shebang,
pre code .hljs-apache pre code .hljs-sqbracket,
pre code .hljs-tex pre code .hljs-formula {
    color: #707070;
}

pre code .hljs-coffeescript pre code .hljs-javascript,
pre code .hljs-javascript pre code .hljs-xml,
pre code .hljs-tex pre code .hljs-formula,
pre code .hljs-xml pre code .hljs-javascript,
pre code .hljs-xml pre code .hljs-vbscript,
pre code .hljs-xml pre code .hljs-css,
pre code .hljs-xml pre code .hljs-cdata {
    opacity: 0.5;
}

pre code.hljs.html::before,
pre code.hljs.js::before,
pre code.hljs.bash::before,
pre code.hljs.css::before {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    position: absolute;
    top: 0;
    right: 0;
    color: #ccc;
    text-align: right;
    font-size: 0.9em;
    padding: 5px 10px 0;
    line-height: 15px;
    height: 15px;
    font-weight: 600;
}

pre code.hljs.html::before {
    content: "HTML";
}

pre code.hljs.js::before {
    content: "JS";
}

pre code.hljs.bash::before {
    content: "Shell";
}

pre code.hljs.css::before {
    content: "CSS";
}

#ad {
    width: 125px;
    position: fixed;
    z-index: 19;
    bottom: 10px;
    right: 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 3px;
    font-size: 13px;
}

#ad a {
    font-weight: normal;
}

.carbon-img,
.carbon-text {
    display: block;
    margin-bottom: 4px;
    font-weight: normal;
    color: #304455;
}

.carbon-poweredby {
    color: #aaa;
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: normal;
}

#bsa-native .native-box {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.075);
    background-color: #f8f8f8;
    color: #304455;
    display: flex;
    border-radius: 3px;
    padding: 0.65em 1em;
    align-items: center;
    margin-bottom: 1.2em;
}

#bsa-native .native-box .native-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 10px 14px;
}

#bsa-native .native-box .native-sponsor {
    background-color: #41b983;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    margin-right: 1em;
    line-height: 1;
    padding: 6px 10px;
    font-weight: 600;
    text-transform: uppercase;
}

#bsa-native .native-box .native-text {
    font-weight: normal;
    line-height: 1.35;
    text-align: left;
}

@media print {
    #ad {
        display: none;
    }
}

body {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #304455;
    background-color: #fff;
    margin: 0;
}

body.docs {
    padding-top: 101px;
}

@media screen and (max-width: 900px) {
    body.docs {
        padding-top: 0;
    }
}

a {
    text-decoration: none;
    color: #304455;
}

img {
    border: none;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);
}

li {
    padding: 10px 0;
}

ul>li {
    padding-left: 6px;
    margin-left: 6px;
    position: relative;
}

ul>li::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: -15px;
    top: 20px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #4fc08d;
}

hr {
    margin: 30px 0;
    background-color: #4fc08d;
}

h1,
h2,
h3,
h4,
strong {
    padding: 20px 0px;
    font-weight: 600;
    color: #273849;
}

code,
pre {
    margin: 20px 0;
    /* font-family: "Roboto Mono", Monaco, courier, monospace; */
    font-family: Consolas, Monaco, monospace;

    font-size: 0.85em;
    background-color: #f8f8f8;
    -webkit-font-smoothing: initial;
    -moz-osx-font-smoothing: initial;
}

code {
    color: #d63200;
    padding: 3px 5px;
    margin: 0 2px;
    border-radius: 2px;
    white-space: nowrap;
}

em {
    color: #4f5959;
}

p {
    word-spacing: 0.05em;
}

a.button,
input.button {
    padding: 0.75em 2em;
    border-radius: 2em;
    display: inline-block;
    color: #fff;
    background-color: #4fc08d;
    transition: all 0.15s ease;
    box-sizing: border-box;
    border: 1px solid #4fc08d;
}

a.button.has-icon,
input.button.has-icon {
    position: relative;
    text-indent: 1.4em;
}

a.button.has-icon>svg,
input.button.has-icon>svg {
    position: absolute;
    left: 0.4em;
    top: 0.4em;
    width: 2em;
}

a.button.white,
input.button.white {
    background-color: #fff;
    color: #42b983;
}

a.button.gray,
input.button.gray {
    background-color: #f6f6f6;
    color: #4f5959;
    border-color: #f6f6f6;
}

#main {
    position: relative;
    z-index: 1;
    padding: 0 60px 30px;
    overflow-x: hidden;
}

#nav .nav-link {
    cursor: pointer;
}

#nav .nav-dropdown-container .nav-link:hover:not(.current) {
    border-bottom: none;
}

#nav .nav-dropdown-container:hover .nav-dropdown {
    display: block;
}

#nav .nav-dropdown-container .arrow {
    pointer-events: none;
}

#nav .nav-dropdown {
    display: none;
    box-sizing: border-box;
    max-height: calc(100vh - 101px);
    overflow-y: auto;
    position: absolute;
    top: 100%;
    right: -15px;
    background-color: #fff;
    padding: 10px 0;
    border: 1px solid #ddd;
    border-bottom-color: #ccc;
    text-align: left;
    border-radius: 4px;
    white-space: nowrap;
}

#nav .nav-dropdown li {
    line-height: 1.8em;
    margin: 0;
    display: block;
}

#nav .nav-dropdown li>ul {
    padding-left: 0;
}

#nav .nav-dropdown li:first-child h4 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

#nav .nav-dropdown a,
#nav .nav-dropdown h4 {
    padding: 0 24px 0 20px;
}

#nav .nav-dropdown h4 {
    margin: 0.45em 0 0;
    padding-top: 0.45em;
    border-top: 1px solid #eee;
}

#nav .nav-dropdown a {
    color: #354c63;
    display: block;
}

#nav .nav-dropdown a:hover {
    color: #42b983;
}

#nav .arrow {
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
    margin-left: 6px;
    margin-right: -14px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #4f5959;
}

sup.beta.beta {
    font-size: 0.6em;
    margin-left: 0.7em;
    text-transform: uppercase;
    opacity: 0.6;
}

@media print {
    body {
        color: #000;
    }

    .highlight {
        padding: 0;
        page-break-inside: avoid;
    }

    .highlight .code pre {
        color: #000;
        background-color: #fff;
        border-style: solid;
        border-width: 2px 2px 2px 2px;
        border-color: #e8e8e8;
        page-break-inside: avoid;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        color: #000;
        page-break-after: avoid;
        page-break-before: avoid;
    }

    img {
        page-break-inside: avoid;
    }

    h2+p {
        page-break-before: avoid;
    }

    a:link:after,
    a:visited:after {
        content: " [" attr(href) "] ";
    }
}

.api h2>sup,
.api h3>sup {
    margin-left: 0.3em;
    color: #b9465c;
}

.rotating-clockwise {
    animation: 3s rotating-clockwise linear infinite;
}

i.rotating-clockwise {
    display: inline-block;
    animation-duration: 2s;
}

@-moz-keyframes rotating-clockwise {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotating-clockwise {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@-o-keyframes rotating-clockwise {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotating-clockwise {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

#header {
    background-color: #fff;
    padding: 10px 30px 10px 60px;
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

#v3-banner {
    background-color: #4e6981;
    min-height: 40px;
    padding: 10px 60px;
    z-index: 19;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    display: block;
}

#v3-banner a {
    color: #7adeb2;
    font-weight: bold;
}

#v3-banner .only-sm {
    display: none;
    margin: 0 5px;
}

@media screen and (max-width: 900px) {

    #v3-banner .hidden-sm {
        display: none;
    }

    #v3-banner .only-sm {
        display: inline;
    }
}

body.docs #header {
    position: fixed;
    width: 100%;
    top: 40px;
}

body.docs #v3-banner {
    position: fixed;
    width: 100%;
    top: 0;
}

#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 40px;
}

#nav .break {
    display: none;
}

#nav li {
    display: inline-block;
    position: relative;
    margin: 0 0.6em;
}

#nav .nav-dropdown-container {
    padding-right: 0.8em;
}

#nav .nav-dropdown-container:last-child {
    padding-right: 0;
}

#nav .nav-dropdown .nav-link:hover,
#nav .nav-dropdown .nav-link.current {
    border-bottom: none;
}

#nav .nav-dropdown .nav-link.current::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid #42b983;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
}

#nav .nav-dropdown .nav-link.new::before {
    content: "";
    width: 0;
    height: 0;
    border: 2px solid #f66;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 1px);
    left: 8px;
}

#nav a.badge-parent {
    padding-right: 26px;
    position: relative;
}

#nav sup.badge {
    position: absolute;
    top: -4px;
    margin-left: 4px;
    background-color: #42b983;
    color: #fff;
    height: 14px;
    font-size: 10px;
    line-height: 1;
    font-weight: bold;
    border-radius: 4px;
    padding: 3px 4px 0;
}

.nav-link {
    padding-bottom: 3px;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.current {
    border-bottom: 3px solid #42b983;
}

.nav-link.new::before {
    content: "";
    width: 0;
    height: 0;
    border: 2px solid #f66;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 1px);
    left: -8px;
}

.new-label {
    position: absolute;
    top: 3px;
    left: 110%;
    background-color: #42b983;
    color: #fff;
    line-height: 16px;
    height: 16px;
    font-size: 9px;
    font-weight: bold;
    font-family: "Roboto Mono", Monaco, courier, monospace;
    padding: 1px 4px 0 6px;
    border-radius: 4px;
}

.search-query {
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    padding: 0 15px 0 30px;
    border: 1px solid #e3e3e3;
    color: #273849;
    outline: none;
    border-radius: 15px;
    margin-right: 10px;
    transition: border-color 0.2s ease;
    background-size: 20px;
    vertical-align: middle !important;
}

.search-query:focus {
    border-color: #42b983;
}

#logo {
    display: inline-block;
    font-size: 1.5em;
    line-height: 40px;
    color: #273849;
    font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
}

#logo img {
    vertical-align: middle;
    margin-right: 6px;
    width: 40px;
    height: 40px;
}

#mobile-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #fff;
    z-index: 20;
    display: none;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    transition: background-color 0.25s ease-in;
}

#mobile-bar>* {
    pointer-events: auto;
}

#mobile-bar .menu-button {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 8px;
    left: 12px;
    background-size: 24px;
}

#mobile-bar .logo {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 5px;
    left: 50%;
    margin-left: -15px;
    background-size: 30px;
}

@media print {
    #header {
        display: none;
    }
}

#demo,
.demo,
 .demo {
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 25px 35px;
    margin-top: 1em;
    margin-bottom: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow-x: auto;
}

#demo h1,
.demo h1,
 .demo h1 {
    margin: 0 0 0.5em;
    font-size: 1.8em;
}

#demo h2,
.demo h2,
 .demo h2 {
    padding: 0;
    border: none;
}

#demo h2,
.demo h2,
 .demo h2,
#demo h3,
.demo h3,
 .demo h3,
#demo h4,
.demo h4,
 .demo h4,
#demo h5,
.demo h5,
 .demo h5,
#demo h6,
.demo h6,
 .demo h6 {
    margin: 1em 0;
}

#demo ul,
.demo ul,
 .demo ul,
#demo ol,
.demo ol,
 .demo ol {
    padding-left: 1.5em;
    padding-bottom: 0.2em !important;
}

#demo ul:first-child,
.demo ul:first-child,
 .demo ul:first-child,
#demo ol:first-child,
.demo ol:first-child,
 .demo ol:first-child {
    margin-top: 0;
}

#demo ul:last-child,
.demo ul:last-child,
 .demo ul:last-child,
#demo ol:last-child,
.demo ol:last-child,
 .demo ol:last-child {
    margin-bottom: 0;
}

#demo li,
.demo li,
 .demo li {
    color: #304455;
}

#demo li.done,
.demo li.done,
 .demo li.done {
    color: #4f5959;
    text-decoration: line-through;
}

#demo p,
.demo p,
 .demo p {
    margin: 0 !important;
    padding: 0 !important;
}

#demo textarea,
.demo textarea,
 .demo textarea {
    width: 100%;
    resize: vertical;
}

#demo> :first-child,
.demo> :first-child,
 .demo> :first-child {
    margin-top: 0;
}

#demo> :last-child,
.demo> :last-child,
 .demo> :last-child {
    margin-bottom: 0;
}

ul#demo li,
ul.demo li {
    margin-left: 1.5em;
}

@media screen and (max-width: 900px) {

    #demo,
    .demo {
        margin-left: 0;
    }
}

.benchmark-table {
    margin: 0 auto;
    text-align: center;
}

.benchmark-table tbody>tr>th {
    text-align: right;
}

.benchmark-table th,
.benchmark-table td {
    padding: 3px 7px;
}

@media print {

    #demo,
    .demo,
     .demo {
        page-break-inside: avoid;
        padding: 1em;
        margin-bottom: 1em;
        border-width: 2px;
    }
}

 .platinum {
    text-align: center;
}

 .platinum a {
    display: inline-block;
    margin: 20px;
}

 .platinum img {
    width: 250px;
    vertical-align: middle;
}

 .sponsor-section {
    text-align: center;
    margin-top: 0;
    margin-bottom: 60px;
}

 .patreon-sponsors a,
 .patreon-sponsors img {
    max-width: 140px;
    max-height: 60px;
    display: inline-block;
    vertical-align: middle;
}

 .patreon-sponsors a {
    margin: 10px 20px;
}

 .open-collective-sponsors img {
    max-width: 140px;
    max-height: 60px;
    margin-right: 30px;
    margin-bottom: 20px;
}

 .video-sponsors-china a {
    display: inline-block;
    margin: 20px;
}

 .video-sponsors-china img {
    width: 250px;
}

#one-time-donations a,
#one-time-donations svg {
    display: inline-block;
    vertical-align: middle;
}

#one-time-donations a {
    margin: 20px;
    color: #304455;
}

#one-time-donations svg {
    margin-right: 5px;
}

#coin-details {
    text-align: center;
    border-radius: 4px;
    padding: 30px;
    font-weight: bold;
}

#coin-details img {
    width: 200px;
}

#coin-details p {
    padding: 0;
    margin: 0 0 20px;
}

.main-sponsor {
    color: #4f5959;
    font-size: 0.85em;
}

.main-sponsor .logo {
    color: #4f5959;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    display: block;
}

.main-sponsor .logo:first-child {
    margin-top: 18px;
}

.main-sponsor .logo:last-child {
    margin-bottom: 20px;
}

.main-sponsor img,
.main-sponsor a {
    width: 125px;
}

.become-backer {
    border: 1px solid #42b983;
    border-radius: 2em;
    display: inline-block;
    color: #42b983;
    font-size: 0.8em;
    width: 125px;
    padding: 4px 0;
    text-align: center;
    margin-bottom: 20px;
}

#sidebar-sponsors-platinum-left {
    display: block;
}

#sidebar-sponsors-platinum-right {
    display: none;
    position: fixed;
    z-index: 19;
    top: 90px;
    right: 20px;
}

@media screen and (min-width: 1300px) {
    #sidebar-sponsors-platinum-left {
        display: none;
    }

    #sidebar-sponsors-platinum-right {
        display: block;
    }
}

#search-page .search-form .search-query {
    width: 100%;
    border-radius: 5px;
    margin-right: 0;
}

#search-page .search-form .search-footer {
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

#search-page .search-form .search-footer p {
    margin: 0;
    padding: 0;
}

#search-page .search-result {
    margin-bottom: 15px;
}

#search-page .search-result .title {
    display: block;
    font-size: 17.55px;
}

#search-page .search-result .summary {
    padding: 0;
    margin: 0;
}

#search-page .search-result .breadcrumb {
    color: #4f5959;
}

#search-page .search-result .breadcrumb+.breadcrumb::before {
    content: "\203A\A0";
    margin-left: 5px;
    color: #4f5959;
}

.guide[class*="migration"] h2>sup,
.guide[class*="migration"] h3>sup {
    margin-left: 0.3em;
    color: #b9465c;
}

.guide[class*="migration"] .upgrade-path {
    margin-top: 2em;
    padding: 2em;
    background: rgba(73, 195, 140, 0.1);
    border-radius: 2px;
}

.guide[class*="migration"] .upgrade-path>h4 {
    margin-top: 0;
}

.guide[class*="migration"] .upgrade-path>p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.sidebar {
    position: absolute;
    z-index: 10;
    top: 101px;
    left: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}

.sidebar h2 {
    margin-top: 0.2em;
}

.sidebar ul {
    list-style-type: none;
    margin: 0;
    line-height: 1.5em;
    padding-left: 1em;
}

.sidebar li {
    margin-top: 0.5em;
}

.sidebar .sidebar-inner {
    width: 260px;
    padding: 35px 0px 60px 20px;
}

.sidebar .version-select {
    vertical-align: middle;
    margin-left: 5px;
}

.sidebar .menu-root {
    padding-left: 0;
}

.sidebar .sidebar-link {
    color: #4f5959;
}

.sidebar .sidebar-link.current {
    font-weight: 600;
    color: #42b983;
}

.sidebar .sidebar-link.new:after {
    content: "NEW";
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background-color: #42b983;
    line-height: 14px;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.sidebar .sidebar-link:hover {
    border-bottom: 2px solid #42b983;
}

.sidebar .section-link.active {
    font-weight: bold;
    color: #42b983;
}

.sidebar .main-menu {
    margin-bottom: 20px;
    display: none;
    padding-left: 0;
}

.sidebar .nav-dropdown h4 {
    font-weight: normal;
    margin: 0;
}

@media screen and (max-width: 900px) {
    .sidebar {
        position: fixed;
        background-color: #f9f9f9;
        height: 100%;
        top: 40px;
        left: 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        transition: all 0.4s cubic-bezier(0.4, 0, 0, 1);
        -webkit-transform: translate(-280px, 0);
        transform: translate(-280px, 0);
    }

    .sidebar .sidebar-inner {
        padding: 60px 10px 30px 20px;
        box-sizing: border-box;
    }

    .sidebar .sidebar-inner-index {
        padding: 10px 10px 10px 20px;
    }

    .sidebar .search-query {
        width: 200px;
        margin-bottom: 10px;
    }

    .sidebar .main-menu {
        display: block;
    }

    .sidebar.open {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@media print {
    .sidebar {
        display: none;
    }
}

.menu {
    font-size: 1.2em;
}

.menu .menu-root {
    padding-left: 0;
}

.menu #search-form,
.menu .algolia-autocomplete,
.menu input {
    width: 100%;
}

.menu .aa-dropdown-menu {
    box-sizing: border-box;
}

.menu h3 {
    margin: 1.5em 0 0.75em;
}

.menu h3:before,
.menu h3:after {
    display: none;
}

.menu li {
    list-style-type: none;
    margin-top: 0.1em;
}

#team-members .sort-by-distance-button {
    display: inline-block;
    padding: 0.4em 0.7em 0.45em;
    font-weight: bold;
    font-size: 0.5em;
    text-transform: uppercase;
    line-height: 1;
    border: none;
    background: #304455;
    color: #fff;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    /* float: right; */
    margin-top: 0.3em;
}

#team-members .sort-by-distance-button i {
    margin-right: 0.25em;
}

#team-members .sort-by-distance-button i:last-child {
    margin-right: 0;
}

#team-members .sort-by-distance-button[disabled] {
    opacity: 0.7;
    cursor: default;
}

#team-members .vuer {
    display: flex;
    padding: 25px 0;
    border-bottom: 1px dotted #ddd;
}

#team-members .vuer:first-of-type {
    margin-top: 15px;
}

#team-members .vuer:last-of-type {
    border-bottom: none;
}

#team-members .vuer .avatar {
    flex: 0 0 80px;
}

#team-members .vuer .avatar img {
    border-radius: 50%;
    object-fit: cover;
}

#team-members .vuer .profile {
    padding-left: 26px;
    flex: 1;
}

#team-members .vuer .profile h3 {
    margin: 0;
    font-size: 1.3em;
}

#team-members .vuer .profile h3::before,
#team-members .vuer .profile h3::after {
    display: none;
}

#team-members .vuer .profile h3>sup {
    text-transform: uppercase;
    font-size: 0.7em;
    letter-spacing: 0.3px;
    padding: 2px 5px;
    margin-left: 10px;
    color: rgba(0, 0, 0, 0.6);
    background: #f9f7f5;
    border-radius: 5px;
}

#team-members .vuer .profile .user-match {
    cursor: help;
    color: #4682b4;
}

#team-members .vuer .profile .user-match:after {
    content: "\f06a";
    font-family: FontAwesome;
    font-size: 0.75em;
    vertical-align: super;
    margin-left: 4px;
    margin-right: 2px;
    position: relative;
}

#team-members .vuer .profile dl {
    margin: 0.6em 0 0;
}

#team-members .vuer .profile dt,
#team-members .vuer .profile dd,
#team-members .vuer .profile ul,
#team-members .vuer .profile li {
    display: inline;
    padding: 0;
    margin: 0;
    line-height: 1.3;
}

#team-members .vuer .profile dt {
    text-transform: uppercase;
    font-size: 0.84em;
    font-weight: 600;
}

#team-members .vuer .profile dt::after {
    content: "";
    margin-right: 7px;
}

#team-members .vuer .profile dt i {
    width: 14px;
    text-align: center;
}

#team-members .vuer .profile dt i.fa-map-marker {
    font-size: 1.15em;
}

#team-members .vuer .profile dt i.fa-globe {
    font-size: 1.2em;
}

#team-members .vuer .profile dt i.fa-link {
    font-size: 1.05em;
}

#team-members .vuer .profile dd {
    font-weight: 600;
}

#team-members .vuer .profile dd::after {
    display: block;
    content: " ";
    margin-top: 0.6em;
}

#team-members .vuer .profile li {
    display: inline-block;
}

#team-members .vuer .profile li::after {
    display: inline-block;
    content: "·";
    margin: 0 8px;
}

#team-members .vuer .profile li:last-child::after {
    content: "";
}

#team-members .vuer .profile .social a {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-right: 4px;
}

#team-members .vuer .profile .social a.github,
#team-members .vuer .profile .social a.codepen {
    color: #000;
}

#team-members .vuer .profile .social a.twitter {
    color: #1da1f3;
}

#team-members .vuer .profile .social a.linkedin {
    color: #0077b5;
}

#team-members .vuer .profile .social i {
    vertical-align: text-bottom;
    font-size: 1.3em;
}

@media (max-width: 640px) {
    #team-members .vuer .profile h3 sup {
        display: inline-block;
        margin-left: 0;
    }
}

#partners .partner {
    display: flex;
    padding: 25px 0;
    border-bottom: 1px dotted #ddd;
}

#partners .partner:first-of-type {
    margin-top: 15px;
}

#partners .partner:last-of-type {
    border-bottom: none;
}

#partners .partner .logo {
    flex: 0 0 125px;
}

#partners .partner .profile {
    padding: 0 26px;
    flex: 1;
}

#partners .partner .profile h3 {
    margin: 0;
    font-size: 1.3em;
}

#partners .partner .profile p {
    margin-top: 0;
}

#partners .partner .profile dl {
    margin: 0.6em 0 0;
}

#partners .partner .profile dt,
#partners .partner .profile dd,
#partners .partner .profile ul,
#partners .partner .profile li {
    display: inline;
    padding: 0;
    margin: 0;
    line-height: 1.3;
}

#partners .partner .profile dt {
    text-transform: uppercase;
    font-size: 0.84em;
    font-weight: 600;
}

#partners .partner .profile dt::after {
    content: "";
    margin-right: 7px;
}

#partners .partner .profile dt i {
    width: 14px;
    text-align: center;
}

#partners .partner .profile dt i.fa-map-marker {
    font-size: 1.15em;
}

#partners .partner .profile dt i.fa-globe {
    font-size: 1.2em;
}

#partners .partner .profile dt i.fa-link {
    font-size: 1.05em;
}

#partners .partner .profile dd {
    font-weight: 600;
}

#partners .partner .profile dd::after {
    display: block;
    content: "";
    margin-top: 0.6em;
}

#partners .partner .profile li {
    display: inline-block;
}

#partners .partner .profile li::after {
    display: inline-block;
    content: "·";
    margin: 0 8px;
}

#partners .partner .profile li:last-child::after {
    content: "";
}

#partners .partner .profile .social a {
    color: #000;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-right: 4px;
}

#partners .partner .profile .social a.github {
    color: #000;
}

#partners .partner .profile .social a.twitter {
    color: #1da1f3;
}

#partners .partner .profile .social a.linkedin {
    color: #0077b5;
}

#partners .partner .profile .social a.instagram {
    color: #c13584;
}

#partners .partner .profile .social a.youtube {
    color: #f00;
}

#partners .partner .profile .social i {
    vertical-align: text-bottom;
    font-size: 1.3em;
}

.style-guide .style-example,
.style-guide details,
.style-guide .style-enforcement {
    border-radius: 2px;
    margin: 1.6em 0;
    padding: 1.6em;
}

.style-guide .style-example h4,
.style-guide details h4,
.style-guide .style-enforcement h4 {
    margin-top: 0;
}

.style-guide .style-example figure:last-child,
.style-guide details figure:last-child,
.style-guide .style-enforcement figure:last-child,
.style-guide .style-example p:last-child,
.style-guide details p:last-child,
.style-guide .style-enforcement p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.style-guide .style-example.example-bad {
    background: #f7e8e8;
}

.style-guide .style-example.example-bad h4 {
    color: #a67878;
}

.style-guide .style-example.example-good {
    background: #eaedec;
}

.style-guide .style-example.example-good h4 {
    color: #677b72;
}

.style-guide details,
.style-guide .style-enforcement {
    background-color: #eee;
}

.style-guide details {
    display: block;
    position: relative;
}

.style-guide details:not([open]) summary::after {
    content: "...";
}

.style-guide details:not([open]) summary:hover {
    background: rgba(255, 255, 255, 0.3);
}

.style-guide summary {
    cursor: pointer;
    padding: 1.6em;
    margin: -1.6em;
    outline: none;
}

.style-guide summary>h4 {
    display: inline-block;
    margin: 0;
}

.style-guide .style-enforcement table {
    width: 100%;
    background-color: #f8f8f8;
    border-radius: 2px;
}

.style-guide .style-enforcement th,
.style-guide .style-enforcement td {
    padding: 0.4em;
    text-align: center;
}

.style-guide .style-enforcement th {
    padding-bottom: 0.2em;
}

.style-guide .style-enforcement td {
    padding-top: 0.2em;
}

.style-guide .style-rule-tag {
    background-color: #f8f8f8;
    border-radius: 2px;
    font-size: 0.9em;
    color: #677b72;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.1em 0.4em;
}

.style-guide a>.style-rule-tag {
    color: #42b983;
}

.style-guide sup {
    text-transform: uppercase;
    font-size: 0.7em;
    margin-left: 1em;
    pointer-events: all;
    position: absolute;
}

.style-guide [data-p="a"] {
    color: #6b2a2a;
}

.style-guide [data-p="b"] {
    color: #8c480a;
}

.style-guide [data-p="c"] {
    color: #2b5a99;
}

.style-guide [data-p="d"] {
    content: #3f536d;
}

.modal {
    box-sizing: border-box;
    display: none;
    position: fixed;
    width: 75%;
    height: auto;
    padding: 0.5em;
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.modal.open {
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 40;
}

.modal-text {
    margin-bottom: 0.5em;
    text-align: center;
}

.modal-text>a {
    color: #42b983;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 30;
}

.stop-scroll {
    overflow: hidden;
    height: 100%;
}

@media screen and (max-width: 400px) {
    .modal {
        width: 98%;
    }
}

.scrimba,
.vueschool {
    background-color: #e7ecf3;
    padding: 1em 1.25em;
    border-radius: 2px;
    color: #486491;
    position: relative;
}

.scrimba a,
.vueschool a {
    color: #486491 !important;
    position: relative;
    padding-left: 36px;
}

.scrimba a:before,
.vueschool a:before {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    top: -5px;
    left: -4px;
    border-radius: 50%;
    background-color: #73abfe;
}

.scrimba a:after,
.vueschool a:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top: 5px;
    left: 8px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #fff;
}

.vue-mastery {
    background-color: #e7ecf3;
    padding: 1em 1.25em;
    border-radius: 2px;
    color: #486491;
    position: relative;
    margin-top: 1em;
}

.vue-mastery a {
    color: #486491 !important;
    position: relative;
    padding-left: 36px;
}

.vue-mastery a:before {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    top: -5px;
    left: -4px;
    border-radius: 50%;
    background-color: #73abfe;
}

.vue-mastery a:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top: 5px;
    left: 8px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #fff;
}

.themes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.themes-grid .item-preview {
    width: 290px;
    margin-bottom: 25px;
}

.themes-grid .item-preview-img {
    transition: 0.15s box-shadow, 0.15s transform;
    border-radius: 0.5rem;
    box-shadow: 0 2rem 1.5rem -1.5rem rgba(33, 37, 41, 0.15), 0 0 1.5rem 0.5rem rgba(33, 37, 41, 0.05);
    overflow: hidden;
    display: block;
}

.themes-grid .item-preview-img:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 2.25rem 1.5rem -1.5rem rgba(33, 37, 41, 0.2), 0 0 1.5rem 0.5rem rgba(33, 37, 41, 0.05);
}

.themes-grid img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    vertical-align: middle;
    border-style: none;
}

.themes-grid .item-preview-name-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.themes-grid h3.item-preview-name {
    margin-top: 0.7rem;
    margin-bottom: 0;
}

.themes-grid h3.item-preview-name.free::after {
    content: "FREE";
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background-color: #42b983;
    line-height: 14px;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.themes-grid .item-preview-price {
    margin-top: 0.7rem;
}

.themes-grid .item-preview-description {
    font-size: 0.9rem;
}

.themes-grid .see-more-container {
    text-align: center;
    width: 100%;
}

.themes-grid .see-more-container .see-more-link {
    color: #42b983;
    display: inline-block;
    width: auto;
}

@media screen and (max-width: 1300px) {
    .themes-grid {
        justify-content: center;
    }

    .themes-grid .item-preview {
        justify-content: center;
        width: 380px;
    }
}

.ad-pagetop {
    background: #f8f8f8;
    padding: 8px 16px;
    border-radius: 4px;
    /* color: $accent; */
    clear: both;
    position: relative;
}

.ad-pagetop a {
    display: block;
}

.ad-pagetop span {
    color: #1c90f3;
    display: inline-block;
}

.ad-pagetop span.name {
    color: #1c90f3;
    font-size: 1.1em;
}

.ad-pagetop span.description {
    margin-left: 0.8em;
    font-size: 0.9em;
    color: #666;
    font-weight: normal;
}

.ad-pagetop span.action {
    font-size: 0.75em;
    color: #888;
    border: 1px solid #888;
    border-radius: 3px;
    padding: 2px 6px;
    margin-left: 1em;
}

.ad-pagetop:after {
    content: "广告";
    font-size: 10px;
    position: absolute;
    top: 50%;
    color: #aaa;
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: -9px;
    right: 10px;
}

@media screen and (max-width: 560px) {
    .ad-pagetop {
        display: none;
    }
}

#header {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s ease-in-out;
}

.api>a:first-of-type>h2 {
    margin-top: 0;
    padding-top: 0;
}

.api ul {
    padding-left: 1.25em;
    line-height: 1.4em;
}

.api ul ul,
.api ul p:not(.tip) {
    padding-bottom: 0;
    margin: 1.2em 0;
}

 a.button {
    font-size: 0.9em;
    color: #fff;
    margin: 0.2em 0;
    width: 200px;
    text-align: center;
    padding: 12px 24px;
    display: inline-block;
    vertical-align: middle;
}

 img {
    max-width: 100%;
}

 span.light {
    color: #4f5959;
}

 span.info {
    font-size: 0.85em;
    display: inline-block;
    vertical-align: middle;
    width: 280px;
    margin-left: 20px;
}

 h1 {
    margin: 0 0 1em;
}

 h2,
 h3 {
    pointer-events: none;
}

 h2 a,
 h3 a,
 h2 button,
 h3 button {
    pointer-events: auto;
    color: #273849;
}

 h2:before,
 h3:before {
    content: "";
    display: block;
    margin-top: -136px;
    height: 136px;
    visibility: hidden;
}

 h2 {
    padding-bottom: 0.7em;
}

 h3 {
    line-height: 1.2;
    position: relative;
}

 h3>a:before {
    content: "#";
    color: #42b983;
    position: absolute;
    left: -0.7em;
    margin-top: -0.05em;
    padding-right: 0.5em;
    font-size: 1.2em;
    line-height: 1;
    font-weight: bold;
}

 figure {
    margin: 1.2em 0;
}

 p,
 ul,
 ol {
    line-height: 1.6em;
    
    padding-bottom: 1.2em;
    position: relative;
    z-index: 1;
}

 ul,
 ol {
    padding-left: 1.5em;
    position: inherit;
}

 ul ul,
 ol ul,
 ul ol,
 ol ol {
    margin: 0;
}

 a {
    color: #42b983;
    font-weight: 600;
}

blockquote {
    margin: 2em 0;
    padding-left: 20px;
    border-left: 4px solid #42b983;
}


blockquote p {
    font-weight: 600;
    margin-left: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

 iframe {
    margin: 1em 0;
}


 p.tip,
 p.success {
    padding: 12px 24px 12px 30px;
    margin: 2em 0;
    border-left-width: 4px;
    border-left-style: solid;
    background-color: #f8f8f8;
    position: relative;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
}

 p.tip:before,
 p.success:before {
    position: absolute;
    top: 14px;
    left: -12px;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

 p.tip code,
 p.success code {
    background-color: #efefef;
}

 p.tip em,
 p.success em {
    color: #304455;
}

 p.tip {
    border-left-color: #f66;
}

 p.tip:before {
    content: "!";
    background-color: #f66;
}

 p.success {
    border-left-color: #42b983;
}

 p.success:before {
    content: "\f00c";
    font-family: FontAwesome;
    background-color: #42b983;
}

 p.warning {
    border-left-color: #ffa500;
}

 p.warning:before {
    background-color: #ffa500;
}

 p.v3-warning {
    margin-top: 0;
}

.guide-links {
    margin-top: 2em;
    height: 1em;
}

.footer {
    color: #4f5959;
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px solid #e5e5e5;
}



/*!
 * Agate by Taufik Nurrohman <https://github.com/taufik-nurrohman>
 * ---------------------------------------------------------------
 *
 * #ade5fc
 * #a2fca2
 * #c6b4f0
 * #d36363
 * #fcc28c
 * #fc9b9b
 * #ffa
 * #fff
 * #333
 * #62c8f3
 * #888
 *
 */
.hljs {
    display: block;
    overflow-x: auto;
    padding: .5em;
    font-size: 16px;
}

.hljs-name,
.hljs-strong {
    font-weight: bold
}

.hljs-code,
.hljs-emphasis {
    font-style: italic
}

.hljs-tag {
    color: #62c8f3
}

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class {
    color: #ade5fc
}

.hljs-string,
.hljs-bullet {
    color: #a2fca2
}

.hljs-type,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-quote,
.hljs-built_in,
.hljs-builtin-name {
    color: #ffa
}

.hljs-number,
.hljs-symbol,
.hljs-bullet {
    color: #d36363
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
    color: #fcc28c
}

.hljs-comment,
.hljs-deletion,
.hljs-code {
    color: #888
}

.hljs-regexp,
.hljs-link {
    color: #c6b4f0
}

.hljs-meta {
    color: #fc9b9b
}

.hljs-deletion {
    background-color: #fc9b9b;
    color: #333
}

.hljs-addition {
    background-color: #a2fca2;
    color: #333
}

.hljs a {
    color: inherit
}

.hljs a:focus,
.hljs a:hover {
    color: inherit;
    text-decoration: underline
}